<template>
  <transition name="slide">
    <div class="page-child">
      <BackButton></BackButton>
      <div>我是一个子页面</div>
      <div class="item">
        <button @click="testReturn">测试【返回回调】$router.return</button>
      </div>
      <div class="item">
        <button @click="testCallback">测试【直接回调】$router.callback，++this.counter</button>
      </div>
      <div class="item">
        <button @click="testReturnTo">测试【返回首页】$router.returnTo</button>
      </div>

      <div class="slide-back-disabled">
        <div class="item">
          <div>此处右侧滑动返回无效</div>
        </div>
      </div>
    </div>
  </transition>
</template>
<script>
import { SwipeEvents } from 'swipe-events-wrapper'
export default {
  mixins: [SwipeEvents],
  data() {
    return {
      counter: 1
    }
  },
  mounted() {
    this.counter = this.$route.params.counter || 1
  },
  methods: {
    back() {
      this.$router.back()
    },
    testReturn() {
      this.$router.return({
        msg: 'return OK!'
      })
    },
    testCallback() {
      this.$router.callback({
        counter: ++this.counter,
        msg: 'callback OK!'
      })
    },
    testReturnTo() {
      this.$router.returnTo({
        name: 'home',
        params: {}
      })
    },
    onSwiperight(evt) {
      return !this.$checkParentElementCssClass(evt, 'slide-back-disabled')
    }
  }
}
</script>
<style scoped>
.item {
  height: 50px;
  display: flex;
  align-items: center;
}

button {
  height: 30px;
  display: flex;
  align-items: center;
}

.slide-back-disabled {
  background-color: gray;
}
</style>
